<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<link rel="stylesheet" href="mlColorPicker.css" type="text/css" media="screen" charset="utf-8" />
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="mlColorPicker.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>mlColorPicker</title>
    </head>
    <body>
        <h1>mlColorPicker Sample Usage</h1>
		<div style="padding:10px;clear:both;border:1px solid black;vertical-align:middle;">
			<span id="colorPicker1" style="float:left; border:1px solid black; width:20px; height:20px;margin:5px;background-color:white"></span>
			<span id="text1" style="">click on the square</span>
		</div>
		<div id="colorPicker2"style="padding:10px;clear:both;border:1px solid black;vertical-align:middle;">
			<span id="colorPicker2Span" style="float:left; border:1px solid black; width:20px; height:20px;margin:5px;"></span>
			<span id="text2" style="">click anywhere</span>			
		</div>
    </body>
	<script type="text/javascript">
		$(function(){
			$("#colorPicker1").mlColorPicker({'onChange': function(val,targ){
				$("#colorPicker1").css("background-color", "#" + val);
				$("#text1").text("#" + val);
				alert($(targ).css("background-color"));
			}});
			$("#colorPicker2").mlColorPicker({'onChange': function(val,targ){
				//$("#colorPicker2Span").css("background-color", "#" + val);
				$(targ).css("background-color", "#" + val);
				$("#text2").text("#" + val);
			}});
		});
	</script>
</html>
